<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="../lib/metro.css" rel="stylesheet">

    <title>Test Validator - Metro UI :: Popular HTML, CSS and JS library</title>
    <style>
        .example {
            margin-bottom: 20px;
        }
    </style>
</head>
<body class="m4-cloak">
<div class="container">
    <h1>Validator test page</h1>

    <div class="example">
        <h4>Standalone</h4>
        <input type="text" data-validate="required" id="input1" class="metro-input">
        <input type="text" data-validate="required" id="input2" value="123" class="metro-input">
    </div>

    <div class="example">
        <h4>In form</h4>
        <form data-role="validator">
            <input type="text" data-validate="required" class="metro-input">
            <input type="text" data-validate="required" value="123" class="metro-input">
            <br>
            <button class="button">Submit</button>
        </form>
    </div>

    <div class="example">
        <h4>Validate radio with name as array</h4>
        <form data-role="validator">
            <div class="form-group">
                <input type="radio" name="radio[v1]" data-role="radio" data-caption="Radio1" data-validate="required">
                <input type="radio" name="radio[v1]" data-role="radio" data-caption="Radio1" data-validate="required">
                <input type="radio" name="radio[v1]" data-role="radio" data-caption="Radio1" data-validate="required">
                <span class="invalid_feedback">Please select on of...</span>
            </div>
            <br>
            <button class="button">Submit</button>
        </form>
    </div>

    <div class="example">
        <h4>Validate color</h4>
        <form data-role="validator">
            <div class="form-group">
                <input data-role="input" type="text" name="color" data-validate="color">
            </div>
            <br>
            <button class="button">Submit</button>
        </form>
    </div>

    <div class="example">
        <h4>Validate url</h4>
        <form data-role="validator">
            <div class="form-group">
                <input data-role="input" type="text" name="color" data-validate="url">
            </div>
            <br>
            <button class="button">Submit</button>
        </form>
    </div>

    <div class="example">
        <h4>Validate number</h4>
        <form data-role="validator" action="javascript:">
            <div class="form-group">
                <input data-role="input" type="text" name="number-value" data-validate="required number">
                <span class="invalid_feedback">Please enter a number</span>
            </div>
            <button class="button">Submit</button>
        </form>
    </div>
</div>

<script src="../lib/metro.js"></script>
<script>
    $(function () {
        if (Metro.validator.validate($('#input1')) === false) {
            console.log("Validate input1 error");
        }
        if (Metro.validator.validate($('#input2')) === false) {
            console.log("Validate input2 error");
        }
    });

    console.log( $("input[type=radio]") );
    console.log( $("input[name=radio\\\[v1\\\]]") );
</script>
</body>
</html>
